<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
    \"http://www.w3.org/TR/html4/loose.dtd\">
<html>
    <head>
        <title>font change cookie Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://kiyoto777.web.fc2.com/test/jquery.cookie.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
 var cookie_key="font_size_change_cookie";
 if($.cookie(cookie_key)) {
  $(".main").addClass($.cookie(cookie_key)); // .main にフォント変更のclassを追加
 };
$('#font-size .layout').click(function(){ // フォントサイズ変更をクリック
 $('.main').removeClass('fontS fontM fontL');
 $('#font-size .layout').removeClass('current');
 $(this).addClass('current');
 if($.cookie(cookie_key)){
  $.cookie(cookie_key,null); // cookie があれば消す
 }
 switch(this.id){ // ID名によって判別
  case 'fontS':
   $('.main').addClass('fontS');                // 文字小のclass追加
   $.cookie(cookie_key, 'fontS',{expires: 365});// 文字小のcookie追加
   break;
  case 'fontM':
   $('.main').addClass('fontM');                // 文字中のclass追加
   $.cookie(cookie_key, 'fontM',{expires: 365});// 文字中のcookie追加
   break;
  case 'fontL':
   $('.main').addClass('fontL');                // 文字大のclass追加
   $.cookie(cookie_key, 'fontL',{expires: 365});// 文字大のcookie追加
   break;
 };
 return false;
});
});
</script>
<style type="text/css">
.fontS{
font-size:12px;
}
.fontM{
font-size:22px;
}
.fontL{
font-size:32px;
}
</style>
</head>
<body>
<div class="main">
文字列
</div>
<div id="font-size">
<div class="layout" id="fontS">フォントサイズの変更　小</div>
<div class="layout" id="fontM">フォントサイズの変更　中</div>
<div class="layout" id="fontL">フォントサイズの変更　大</div>
</div>
</body>
</html>
